<template>
  <div class="login-card">
    <el-dialog
      :model-value="true"
      width="28%"
      align-center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeDialog"
      style="min-width: 460px;"
    >
      <div class="login-dialog">
        <div class="dialog-header">
          <img class="logo" src="@/assets/image/tc_logo.png" />
          <h2 class="title">
            <template v-if="currModel.type === 'login'">账号登录</template>
            <template v-if="currModel.type === 'register'">账号注册</template>
            <template v-if="currModel.type === 'forgetPwd'">修改密码</template>
          </h2>
          <div class="empty-box"></div>
          <div class="close-btn" @click="closeDialog">
            <el-icon><Close /></el-icon>
          </div>
        </div>
        <div class="dialog-main" v-if="currModel.type === 'login'">
          <el-form :model="form" ref="loginForm" :rules="loginRules">
            <el-form-item label="账号" prop="account">
              <el-input
                v-model="form.account"
                placeholder="请输入账号"
                :prefix-icon="User"
              />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                placeholder="请输入密码"
                type="password"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <!-- <el-form-item label="验证" prop="imgVerify">
              <mi-captcha
                theme-color="#409eff"
                @Success="imgVerifySuccess"
                ref="captchaRef"
              />
            </el-form-item> -->
          </el-form>
          <div class="login-utils">
            <el-checkbox
              v-model="isRememberPwd"
              label="记住密码"
              size="large"
            />
            <div class="forget-password" @click="changeModel('forgetPwd')">
              忘记密码？
            </div>
          </div>
          <div class="login-btn">
            <el-button
              type="primary"
              v-loading="loginLoading"
              @click="login(loginForm, captchaRef)"
            >
              立即登录
            </el-button>
          </div>
        </div>
        <div class="dialog-main" v-else-if="currModel.type === 'register'">
          <el-form :model="form" ref="registerForm" :rules="registerRules">
            <el-form-item label="用&nbsp;&nbsp;户&nbsp;名" prop="registerUn">
              <el-input
                v-model="form.registerUn"
                placeholder="请输入用户名"
                :prefix-icon="User"
              />
            </el-form-item>
            <el-form-item
              label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码"
              prop="registerPwd"
            >
              <el-input
                v-model="form.registerPwd"
                placeholder="请输入登录密码"
                type="password"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="affirmPwd">
              <el-input
                v-model="form.affirmPwd"
                placeholder="再次输入登录密码"
                type="password"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item label="手&nbsp;机&nbsp;号&nbsp;" prop="mobile">
              <el-input
                v-model="form.mobile"
                placeholder="请输入手机号码"
                :prefix-icon="Iphone"
              />
            </el-form-item>
            <el-form-item label="验&nbsp;证&nbsp;码&nbsp;" prop="code">
              <div class="flex items-center">
                <el-input
                  v-model="form.code"
                  placeholder="请输入验证码"
                  :prefix-icon="Message"
                />
                <el-button
                  class="ml-6 yz"
                  type="success"
                  @click="getVerifyCode(registerForm, '1')"
                  :disabled="btnText !== '获取验证码'"
                >
                  {{ btnText }}
                </el-button>
              </div>
            </el-form-item>
            <div class="register-btn">
              <el-button type="success" @click="register(registerForm)">
                立即注册
              </el-button>
            </div>
          </el-form>
        </div>
        <div class="dialog-main" v-else-if="currModel.type === 'forgetPwd'">
          <el-form :model="form" ref="forgetPwdForm" :rules="forgetRules">
            <el-form-item label="手&nbsp;机&nbsp;号&nbsp;&nbsp;" prop="mobile">
              <el-input
                v-model="form.mobile"
                placeholder="请输入手机号码"
                :prefix-icon="Iphone"
              />
            </el-form-item>
            <el-form-item label="验&nbsp;证&nbsp;码&nbsp;&nbsp;" prop="code">
              <div class="flex items-center">
                <el-input
                  v-model="form.code"
                  placeholder="请输入验证码"
                  :prefix-icon="Message"
                />
                <el-button
                  class="ml-6"
                  type="success"
                  @click="getVerifyCode(forgetPwdForm, '2')"
                  :disabled="btnText !== '获取验证码'"
                >
                  {{ btnText }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item
              label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码"
              prop="forgetPwd"
            >
              <el-input
                v-model="form.forgetPwd"
                placeholder="请输入登录密码"
                type="password"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="forgetAffirmPwd">
              <el-input
                v-model="form.forgetAffirmPwd"
                placeholder="再次输入登录密码"
                type="password"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <div class="register-btn">
              <el-button type="warning" @click="editPwd(forgetPwdForm)">
                修改密码
              </el-button>
            </div>
          </el-form>
        </div>

        <div class="change-model" @click="changeModel(currModel.target)">
          {{ currModel.msg }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue";
import { useLoginCard } from "./hooks";
import { Close, User, Lock, Iphone, Message } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { zlDialog, closeDialog } from "../../utils/zlDialog";

// const emits = defineEmits(["showLoginDialog", "closeLoginDialog"]);
// const props = defineProps(["loginDialogVisible"]);

const registerForm = ref<FormInstance>();
const loginForm = ref<FormInstance>();
const forgetPwdForm = ref<FormInstance>();

// 滑动验证组件
const captchaRef = ref<any>();

const {
  form,
  login,
  loginLoading,
  register,
  changeModel,
  currModel,
  getVerifyCode,
  btnText,
  isRememberPwd,
  registerRules,
  loginRules,
  imgVerifySuccess,
  forgetRules,
  editPwd
} = useLoginCard();
</script>

<style scoped lang="postcss">
.login-card {
  :deep(.el-dialog) {
    @apply rounded-md;
    .el-dialog__header {
      @apply hidden;
    }
    .el-dialog__body {
      @apply p-2 pb-4;
    }
    .login-dialog {
      .mi-captcha-radar-logo {
        @apply hidden;
      }
      .dialog-header {
        @apply relative flex;
        .logo {
          width: 100px;
        }
        .title {
          @apply font-bold flex-1 text-center;
          font-size: 18px;
        }
        .empty-box {
          width: 100px;
        }
        .close-btn {
          @apply absolute -right-4 -top-4 bg-white rounded-full flex items-center justify-center cursor-pointer;
          width: 20px;
          height: 20px;
          box-shadow: 0 0 6px 0px #ccc;
        }
      }
      .dialog-main {
        @apply px-16 mt-10;
        .el-form .el-form-item {
          &:first-child {
            /* @apply mb-10; */
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
        .login-utils {
          @apply flex justify-between items-center mt-1;
          .forget-password {
            @apply text-gray-400 cursor-pointer;
          }
        }
      }
      .el-button--success{
          background-color:#409eff;
          border: 0
      }
      .login-btn,
      .register-btn {
        @apply flex justify-center mt-3;
        .el-button {
          width: 80%;
          background-color:#409eff
        }
      }
      .register-btn {
        @apply mt-7;
      }
      .change-model {
        @apply mt-6 text-theme-color text-right cursor-pointer;
      }
    }
  }
}
</style>
